<template>
    <div>
        <h2>库存统计</h2>
        <div class="chart" id="c3">

        </div>
    </div>
</template>

<script>
import {inject,onMounted,reactive} from "vue"
export default {
    setup(){
        let $echarts = inject("echarts")
        let $http = inject("axios")
        let data = reactive({

        })
        async function getState(){
             data = await $http({url:"/3/data"})
             
        }
        onMounted(() => {
            getState().then(() => {
                let chart = $echarts.init(document.getElementById("c3"))
                chart.setOption({
                    legend:{
                        top: "bottom"
                    },
                    tooltip:{
                        show:true
                    },
                    series:[
                        {
                            type:"pie",
                            data:data.data.chartData.chartData,
                            radius:[10,100],
                            center:["50%","45%"],
                            roseType:"area",
                            itemStyle:{
                                borderRadius:10
                            }
                        }
                    ]
                })
            })

        })
        return { data, getState }
    }
}
</script>

<style lang="less" scoped>
.chart {
            height: 4.5rem;
        }
    
        h2 {
            height: 0.6rem;
            color: #fff;
            line-height: 0.6rem;
            font-size: 0.25rem;
            text-align: center;
        }
</style>